<template>


  <div class="tabs">
    <i-tabs :current="current" @change="tabsSelect" color="#19be6b">
      <i-tab key="1" title="时钟" i-class="tab">

      </i-tab>
      <i-tab key="2" title="增删不改查" i-class="tab">

      </i-tab>
      <i-tab key="3" title="另外" i-class="tab">

      </i-tab>
    </i-tabs>
    <div  :class="[istrue? '':'active']" :key="2">
      <p class="todolist-form">
        <input type="text" class="todolist-input" v-model="text" name="">
        <button size="mini" @click="submitEvent" class="todolist-button">添加你的歌单</button>
      </p>
      <ul class="todolist-list">
        <li v-for="(item, index) in lists"  :key="index">
          {{index+1}}:  {{item}} <span @click="deleteItem(index)">删除</span>
        </li>
      </ul>
    </div>
    <div :class="[itrue? '':'active']" :key="1">
      <canvas canvas-id="myCanvas" class="index-header-data-circle-canvas" ></canvas>
    </div>
    <div :class="[irue? '':'active']" :key="3">
      <div class="play" @tap="toplay">
        玩累了打飞机~~~~速速点我
      </div>

    </div>
  </div>


</template>

<script>
  export default {
    data () {
      return {
        lists:[],
        text:'',
        current: '1',
        cccd:0,
        ddd:null,
        ctx: null,
        h:0,
        ms:0,
        m:0,
        s:0,
        rs:0,


      }
    },
    mounted(){



      this.ddd = setInterval(this.getrun, 20);

    },
    created () {
    },
    methods:{
      toplay(){
        wx.navigateTo({
          url:'/pages/flyGame/main'
        })
      },
      submitEvent(){
        let isExist = this.lists.includes(this.text);
        if (isExist) {
          return wx.showToast({
            title: '当前值已存在',
            icon: 'none',
            duration: 2000

          })
        }
        this.lists.push(this.text);
      },
      deleteItem(index){
        this.lists.splice(index,1);
      },
      tabsSelect(obj){
        this.current = obj.mp.detail.key ;

      },

      getrun(){
        const ctx = wx.createCanvasContext('myCanvas');
        ctx.setStrokeStyle('#00ffff');
        ctx.setShadow(0,0,15,'#00ffff');
        ctx.setLineWidth(17);
        var rpx;
        //获取屏幕宽度，获取自适应单位
        wx.getSystemInfo({
          success: function(res) {
            rpx = res.windowWidth/375;
          },
        })
        const grd = ctx.createLinearGradient(250, 250, 5, 250,250,300);
        grd.addColorStop(0, '#03303a');
        grd.addColorStop(1, '#000');
        ctx.setFillStyle(grd);
        ctx.setLineCap('round');
        ctx.setLineJoin('round');
        ctx.fillRect(0, 0, 375*rpx, 1800*rpx);
        const date =new Date();
        const today=date.toDateString();
        this. h=date.getHours();
        this. m=date.getMinutes();
        this. s=date.getSeconds();
        this. ms=date.getMilliseconds();
        this. rs= this.s+( this.ms /1000);




        ctx.beginPath(); //360/60=6
        ctx.arc(187*rpx,237*rpx,130*rpx,270* (Math.PI/180),((this.m*6)-90)* (Math.PI/180));
        ctx.stroke();

        ctx.beginPath(); //360/60=6
        ctx.arc(187*rpx,237*rpx,95*rpx,270* (Math.PI/180),((this.rs*6)-90)* (Math.PI/180));
        ctx.stroke();

        ctx.beginPath(); //360/12=30
        ctx.arc(187*rpx,237*rpx,165*rpx,270* (Math.PI/180),((this.h*30)-90)*( Math.PI/180));
        ctx.stroke();


        ctx.setFillStyle('rgba(0,255,255,1)');
        ctx.setFontSize(20);
        ctx.fillText(today,120*rpx,237*rpx);
        let nh=('0'+this.h).slice(-2);
        let nm=('0'+this.m).slice(-2);
        let  ns=('0'+this.s).slice(-2);
        ctx.fillText(nh+':'+ nm+':'+ns+':'+ this.ms,120*rpx,260*rpx);

        ctx.draw();
      }
    },
    computed:{
      istrue(){
        let ccc= ('2'===this.current)
        return ccc
      },
      itrue(){
        let ccc= ('1'===this.current)
        return ccc
      },
      irue(){
        let ccc= ('3'===this.current)
        return ccc
      }

    }
  }
</script>

<style>
  .play{
    height: 50rpx;
    width: 56%;
    margin:0 auto;
    border-radius: 12rpx;
    border:12rpx solid red;
    text-align: center;
    margin-top:44rpx;
    color: #FFFFFF;
    background-color: red;
    cursor:pointer

  }
  canvas{



    border:1px solid #000;


    width:1000rpx;
    height: 1080rpx;
  }
  .active{
    display: none;
  }
  .todolist-form{
    display:flex;
    margin:10rpx;
    justify-content:center;
  }
  .todolist-input{
    border:2rpx solid #ddd;
    width:330rpx;
    height:64rpx;
  }
  .todolist-button{
    margin:0;
  }
  .todolist-list{
    width: 50%;
    margin:0 auto;
  }
</style>
